/*
 * @Author: xiaosihan 
 * @Date: 2021-04-24 22:37:03 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-06-13 14:47:09
 */

import React from "react";
import ReactMixinComponent from "@ReactMixinComponent";
import { Bar3D, Bar3DData } from 'xsh-react-three-chart';
import { Button3D } from "xsh-react-three-ui";


interface Props { }

interface State {
    datas: Bar3DData[]
}

export default class Bar3DDemo extends ReactMixinComponent<Props, State> {
    constructor(props: Props) {
        super(props);
    }

    state: State = {
        datas: this.getRandomDatas()
    }

    // 取随机数在某个范围里
    rand(start: number, end: number) {
        return Math.floor(Math.random() * (end - start + 1) + start);
    }

    // 获取随机数据
    getRandomDatas() {
        let length = this.rand(2, 8);
        let datas = [];
        for (let i = 0; i <= length; i++) {
            datas.push(
                { value: this.rand(1, 8) }
            );
        }
        return datas;
    }

    render() {

        const { datas } = this.state;

        return (
            <>
                <Button3D
                    text="切换数据"
                    cursor="pointer"
                    position={{ z: 2 }}
                    onClick={() => {
                        this.setState({
                            datas: this.getRandomDatas()
                        })
                    }}
                />

                <Bar3D
                    datas={datas}
                    cursor="pointer"
                    onClick={e => {
                        console.log(e);
                    }}
                    title={data => {
                        return `custom title value ${data.value}`;
                    }}
                />
            </>
        )
    }
}